<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作台</title>
    <link href="css/main.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            animation-duration: 1s;
        }

        .mTable {
            display: flex;
            flex-direction: column;
            width: 200px;
            height: auto;
            margin: 30px 40px 30px 40px;
            border-bottom: #4f4f4f 1px;
            padding: 30px;
        }

        .xUlPlus {
            padding-top: 30px;
            display: flex;
            height: fit-content;
            flex-wrap: wrap;
            width: 61.8%;
            min-width: 300px;
            margin: 30px auto 30px auto;
        }
        .xBorder {
            border-bottom: 2px solid #282c35 ;
        }
    </style>
</head>
<body>
<template id="msg">
    <div class="mTable" :class="[isEnter ? border :'']" @mouseenter="mouseEnter" @mouseleave="mouseLeave" @click="info($attrs.id)">
        <div>{{$attrs.name}}</div>
        <div>{{$attrs.description}}</div>
        <div>创建时间：{{$attrs.bir}}</div>
    </div>
</template>
<div id="app">
    <header class="xHeader" id="head">
        {{title}}
    </header>
    <div style="height: 50px; width: 1300px; margin: auto">
        <div style="width: 1000px; float: left">
            <form>
                <label>
                    <input class="xSearch" placeholder="请输入搜索的关键词" v-model="inp" @keydown.enter="search()">
                </label>
                <a class="xSearchIcon" @click="search()">搜索</a>
            </form>
        </div>
        <div style="width: 300px; float: right">
            <div class="xButton" @click="create()" style="margin: 0 50px 0 50px">
                <div class="centerText">创建新投票</div>
            </div>
        </div>
    </div>
    <ul class="xUl xUlPlus" id="col">
        <div v-for="(i) in ballots">
            <lab :name="i.name" :description="i.description" :bir="i.bir" :id="i.id"></lab>
        </div>
    </ul>
</div>
<script type="application/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            turnId: 0,
            axGet: {},
            axPost: {},
            ballots: [],
            inp: "",
            title: "新的一天, 期待你的好心情",
            lastSearchTime: 0,
            urls: {
                ser: "/workbench/search",
                create: "new.html",
                full:"/ballot/check/full"
            },
            texts: {
                searchErr: "我们在搜索过程中出现错误。请联系管理员",
                originTitle: "新的一天, 期待你的好心情",
                noBallot: "您现在没有投票.",
                tooFast: "您点击太快啦！"
            }
        },
        methods: {
            search: function () {
                if (new Date().getTime() - this.lastSearchTime < 1000) {
                    this.title = this.texts.tooFast;
                    return false;
                }
                this.axPost
                    .post(this.urls.ser, stringify({
                        msg: this.inp
                    }))
                    .then(resp => {
                        if (!resp.data.status) {
                            this.title = this.texts.searchErr;
                            return;
                        }
                        this.ballots = resp.data.value;
                        if (this.ballots.length === 0) {
                            this.title = this.texts.noBallot;
                        } else {
                            this.title = this.texts.originTitle;
                        }
                    })
                    .catch(() => {
                        this.title = this.texts.searchErr;
                    });
                this.lastSearchTime = new Date().getTime();
                return false;
            },
            create: function () {
                this.axPost
                    .post(this.urls.full, "")
                    .then(resp => {
                        if (!resp.data.status) {
                            window.location.href = this.urls.create;
                            return;
                        }
                        this.title = "你的投票拥有数已达到上限,请删除一个旧的投票后添加";
                    })
                    .catch(() => {
                        this.title = this.texts.searchErr;
                    });
            }
        },
        components: {
            lab: {
                template: "#msg",
                data: function () {
                    return {
                        isEnter: false,
                        shadow: "shadow",
                        border: "xBorder"
                    }
                },
                methods: {
                    info:function (id) {
                        window.location.href = "info.html?id="+ id
                    },
                    mouseEnter:function () {
                        this.isEnter = true;
                        return false;
                    },
                    mouseLeave:function () {
                        this.isEnter = false;
                        return false;
                    }
                }
            }
        },
        created: function () {
            this.turnId = getUrlParam("id");
            this.axGet = axios.create({
                url: window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
            this.axGet
                .get("/captcha/login", {
                    params: {}
                })
                .then(resp => {
                    if (resp.data.status === false) {
                        alert("请先登录")
                        window.location.href = "index.html";
                    }
                })
                .catch(err => {
                    window.location.href = "index.html";
                });
            this.axGet
                .get("/turn/isReady", "")
                .then(resp => {
                    if (resp.data.status === true) {
                        window.location.href = "vote.html";
                    }
                })
                .catch(null);
            this.search();
        },
        mounted: function () {}
    })
</script>
</body>
</html>
